<template>
	<view id="index">
		<!-- 搜索框 -->
		<SearchInput></SearchInput>
		<!-- 轮播图 -->
		<view class="index-swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="item in swiperList" :key="item.goods_id">
					<navigator :url="item.navigator_url">
						<image :src="item.image_src" mode="widthFix"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航条 -->
		<view class="cate">
			<navigator url="/pages/category/category" v-for="item in catesList" :key="item.name" open-type="switchTab">
				<image :src="item.image_src" mode="widthFix"></image>
			</navigator>
		</view>
		<!-- 分类楼层 -->
		<view class="floor">
			<view class="floor_group" v-for="item in floorList" :key="item.floor_title.name">
				<!-- 标题 -->
				<view class="floor_title">
					<image mode="widthFix" :src="item.floor_title.image_src"></image>
				</view>
				<!-- 内容 -->
				<view class="floor_list">
					<navigator :url="item1.navigator_url" v-for="(item1,index1) in item.product_list" :key="item1.name">
						<image :src="item1.image_src" :mode="index1===0?'widthFix':'scaleToFill'"></image>
					</navigator>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		request
	} from "../../utils/api.js";
	export default {
		data() {
			return {
				swiperList: [], //轮播图数组
				catesList: [], //导航条数组
				floorList: [] //分类楼层数组
			}
		},
		onLoad() {
			this.getSwiperList();
			this.getCatesList();
			this.getFloorList();
		},
		methods: {
			//获取轮播图数据
			getSwiperList() {
				request({
					url: '/home/swiperdata'
				}).then(res => {
					res.forEach((v, i) => {
						res[i].navigator_url = v.navigator_url.replace('main', 'index')
					})
					this.swiperList = res
				})
			},
			//获取分类导航数据
			async getCatesList() {
				this.catesList = await request({
					url: '/home/catitems'
				})
			},
			getFloorList() {
				request({
					url: '/home/floordata'
				}).then(result => {
					for (let k = 0; k < result.length; k++) {
						result[k].product_list.forEach((v, i) => {
							result[k].product_list[i].navigator_url = v.navigator_url.replace('?',
								'/index?');
						});
					}
					this.floorList=result
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#index {
		.index-swiper {
			width: 750rpx;
			height: 340rpx;

			swiper {
				height: 100%;

				swiper-item {
					height: 100%;

					image {
						width: 100%;
					}
				}
			}
		}

		.cate {
			display: flex;

			navigator {
				padding: 20rpx;
				flex: 1;

				image {
					width: 100%;
				}
			}
		}

		.floor {
			.floor_group {
				.floor_title {
					padding: 10rpx 0;

					image {
						width: 100%;
					}
				}

				.floor_list {
					overflow: hidden;

					navigator {
						box-sizing: border-box;
						float: left;
						width: 33.33%;

						&:nth-last-child(-n+4){
							height: 33.33vw * 386 / 232 / 2;
							// width: 100%;
							border-left: 10rpx solid #fff;
						}

						&:nth-child(2){
							border-bottom: 10rpx solid #fff;
						}
						&:nth-child(3){
							border-bottom: 10rpx solid #fff;
						}

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>
